<template>
    <view>
        <positionContainerVue :show.sync="newShow" tBStyle="display: flex;justify-content: center;" tStyle="transform: translateX(0rpx)" @changeShow="changeShow">
            <template #slot-view>
                <view class="form-item" @click="endChange">
                    <view class="label">
                        <view class="justify">
                            年龄
                        </view>
                        ：
                    </view>
                    <view class="data">
                        <view v-show="newVal" class="val">
                            {{ setNewVal }}
                        </view>
                        <view v-show="!newVal" class="pla_text">
                            请选择年龄
                        </view>
                        <uni-icons class="icon " :class="{open: newShow,}" type="right" />
                    </view>
                </view>
            </template>
            <template #position-view>
                <view class="select-picker-box">
                    <customizePickerVue :pickerValue.sync="pickerValue" :picker-column="pickerColumn" @bindChange="changePicker"/>
                </view>
            </template>
        </positionContainerVue>
    </view>
</template>

<script>
    import customizePickerVue from '../../../components/customize-picker/customize-picker.vue';
    import positionContainerVue from '../../../components/position-container/position-container.vue';

    export default {
        props: {
            value: Number,
            show: {
                type: Boolean
            },
        },
        components: {
            positionContainerVue,
            customizePickerVue,
        },
        data() {
            const y = new Date().getFullYear();
            return {
                thisY: y,
                newShow: false,
                newVal: '',
                pickerValue: [],
                pickerColumn: [
                    {
                        suffix: '年',
                        key: 'y',
                        listKey: 'y',
                        list: [],
                    },
                ]
            };
        },
        watch: {
            show(val){
                this.newShow = val;
            },
            value: {
                handler(val){
                    // console.log(val);
                    if (this.newVal !== val) {
                        this.newVal = val;
                        this.initPickerValue();
                    }
                },
                immediate: !0,
            }
        },
        computed: {
            setNewVal(){
                return this.newVal && `${this.newVal}岁` || '';
            },
        },
        mounted(){
            this.initPickerColumn();
        },
        methods: {
            changeShow(){
                this.$emit('update:show',this.newShow);
                this.$emit('changeShow', this.newShow);
            },
            generateSequence(count,initial = 0) {
                const init = Number(initial);
                return [...Array(count).keys()].map(i => {
                    const num = i + init;
                    const str = num < 10 ? `0${num}` : `${num}`;
                    return str;
                });
            },
            initPickerColumn(){
                const list = this.generateSequence(100, this.thisY - 99);
                this.pickerColumn.forEach(v => {
                    v.list = list;
                })
                this.initPickerValue();
            },
            initPickerValue(){
                const lists = [];
                const countY = this.thisY - this.newVal;
                this.pickerColumn.forEach((v,i) => {
                    const index = v.list.findIndex(item => Number(item) === countY);
                    lists.push(index > -1 ? index : v.list.length - 1);
                })
                this.pickerValue = lists;
            },
            resetTime(){
            },
            endChange(){
            },
			changePicker(){
				const temVal = [];
				this.pickerValue.forEach((v, i) => {
					const str = this.pickerColumn[i].list[v];
					temVal.push(str);
				});
                const countY = this.thisY - Number(temVal.join(','))
                this.$emit('update:value', countY);
			},
        }
    }
</script>

<style lang="less" scoped>
</style>
